<script setup lang="ts">
import { LeftNav } from '@/components/LeftNav';
import { useLeftNav } from '@/hooks/web/useLeftNav';
import { NavTheme } from '@/model/base-enum';
import { getStoreData } from '@/utils/composition';
import { computed } from 'vue';
import useStore from '@/stores';

const {
  openLeftNav,
  pageTitle,
  currentPageTitle,
  navList,
  currentRoute,
  changeNav,
  changeLeftNavState,
} = useLeftNav('COMMON_HEADER_SERVICE');
let navTheme = computed(() => {
  return useStore().state.loct.navStyle;
});

const rightNeedMargin = computed(() => {
  return useStore().state.loct.navStyle === NavTheme.TopLeft ? true : false;
});
</script>

<template>
  <section class="layout-with-sider">
    <aside
      v-if="navTheme === NavTheme.TopLeft"
      :class="[openLeftNav ? 'left-nav' : 'left-nav-close']"
    >
      <LeftNav
        :open-left-nav="openLeftNav"
        :page-title="pageTitle"
        :nav-list="navList"
        :current-route="currentRoute"
        @change-nav="changeNav"
        @change-left-nav-state="changeLeftNavState"
      />
    </aside>

    <section :class="[openLeftNav && rightNeedMargin ? 'right-content' : 'right-content-close']">
      <div class="user-container">
        <div v-t="currentPageTitle" class="layout-page-title"></div>
        <Lock />
        <router-view />
      </div>
    </section>
  </section>
</template>

<style lang="scss" scoped></style>
